<template>
  <el-dialog
    title="告警事件新增"
    :visible="addShowIf"
    size="small"
    @close="close"
    class="dialog-class1"
  >
    <div style="user-select: text !important">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="108px"
        class="demo-ruleForm eventAddMain"
        :style="{ '--theme': $store.getters.themeColor }"
      >
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="12">
                <el-form-item label="事件标题" prop="alarmBody">
                  <el-input
                    v-model="ruleForm.alarmBody"
                    @input="
                      ruleForm.alarmBody = ruleForm.alarmBody.replace(
                        /\s+/g,
                        ''
                      )
                    "
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="告警类型" prop="warningTypeId">
                  <el-select
                    v-model="ruleForm.warningTypeId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in eventTypeDataSource"
                      :key="index"
                      :label="item.typeName"
                      :value="item.typeValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  class="alarm-time"
                  prop="alarmTime"
                  label="告警时间"
                >
                  <el-date-picker
                    type="datetime"
                    placeholder="选择告警时间"
                    v-model="ruleForm.alarmTime"
                    :editable="false"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%"
                    :picker-options="pickerOptions"
                    popper-class="alarmTime-global"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="事件地点" prop="area">
                  <el-cascader
                    v-model="ruleForm.area"
                    :options="areaData"
                    :props="{
                      checkStrictly: true,
                      value: 'code',
                    }"
                    @expand-change="handleAreaExpandChange"
                    @change="handleAreaChange"
                    ref="areaTree"
                    :key="cascaderKey"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :offset="2" :span="22">
                    <el-form-item label-width="0px" prop="address">
                      <el-input
                        v-model="ruleForm.address"
                        placeholder="详细地址"
                        id="addressId"
                        :disabled="false"
                        ><i
                          class="el-icon-location-outline"
                          slot="suffix"
                          @click="mapClick()"
                        ></i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经纬度" prop="longitude">
                  <el-input
                    v-model="ruleForm.longitude"
                    placeholder="经度"
                    :disabled="true"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="22" :offset="2">
                    <el-form-item label-width="0px">
                      <el-input
                        v-model="ruleForm.latitude"
                        placeholder="纬度"
                        :disabled="true"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="事件描述" prop="description">
                  <el-input
                    class="text-area"
                    type="textarea"
                    v-model="ruleForm.description"
                    @input="
                      ruleForm.description = ruleForm.description.replace(
                        /\s+/g,
                        ''
                      )
                    "
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input
                    style="height: 80px"
                    type="textarea"
                    v-model="ruleForm.remark"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="fileList">
                  <FormItemIconTipLabel
                    content="附件支持上传图片和视频，最多可上传9个"
                    label="上传附件"
                    slot="label"
                  />
                  <EventFileUpload
                    v-model="ruleForm.fileList"
                    accept=".png,.jpg,.jpeg,.bmp,.mp4"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <eventJudgeMapol
        :isAdd="true"
        ref="addEventMap"
        @isMapCancelFun="isMapCancelFun"
        :isMapList="isMapList"
      ></eventJudgeMapol>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
        size="samll"
        class="btn"
        :loading="submitBtn"
        >确 定</el-button
      >
      <el-button
        @click="close()"
        size="samll"
        style="margin-left: 15px"
        class="btn"
        >取 消</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { $getUrlParam } from "@/utils/public";
import eventJudgeMapol from "@/views/pages/eventManagement/eventJudgeMapol";
import {
  getRegion,
  getEnumInfo,
  findOrderAlarm,
  addAlarmOrder,
} from "@/api/modules/eventManagement/eventManagement.js";
import $ from "jquery";
import EventFileUpload from "./components/EventFileUpload.vue";
import FormItemIconTipLabel from "@/components/form/FormItemIconTipLabel.vue";

export default {
  name: "eventManagementAdd",
  props: {
    addShowIf: {
      type: Boolean,
      default: false,
    },
    addClose: {
      type: Function,
      default: function () {
        return {};
      },
    },
    loadInit: {
      type: Function,
      default: function () {
        return {};
      },
    },
  },
  components: {
    eventJudgeMapol,
    EventFileUpload,
    FormItemIconTipLabel,
  },
  data() {
    //事件区域校验
    var validateP = (rule, value, callback) => {
      if (
        value == null ||
        this.ruleForm.cityId == null ||
        this.ruleForm.countyId == null ||
        this.ruleForm.address == null
      ) {
        callback(new Error("请选择省市区并填写详细地址"));
      } else {
        callback();
      }
    };
    //事件区域校验
    var validateL = (rule, value, callback) => {
      if (value == null || this.ruleForm.latitude == null) {
        callback(new Error("请填写经纬度"));
      } else {
        callback();
      }
    };
    //附件校验
    var validateF = (rule, value, callback) => {
      if (this.imageList.length == 0 && this.videoList.length == 0) {
        callback(new Error("请上传附件"));
      } else {
        callback();
      }
    };
    return {
      uploadFileFlag: false, //上传附件标识
      imageUrl: "",
      cascaderKey: 1, // 解决级联视图不回显问题
      allow_img: false,
      allow_video: false,
      showVideoUrl: "",
      order: {
        docVoList: [],
      },
      uploadFileAction: "/problem/docApi/uploadFile",
      isManuallyLocate: true,
      eventLevelDataSource: [],
      eventTypeDataSource: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      mapArea: {}, // 存放事件地点的映射
      ruleForm: {
        area: [], // 事件地点
        alarmBody: null,
        orderId: null, //更新传
        warningOrderId: null, //更新传
        warningTypeId: null, //暂时传入假数据
        emergencyLevel: null,
        alarmTime: null,
        provinceId: null,
        cityId: null,
        countyId: null,
        address: null,
        longitude: null,
        latitude: null,
        gridId: null,
        gridName: null,
        keeperId: null,
        keeperName: null,
        description: null,
        remark: null,
        findName: null,
        findMobile: null,
        imgs: [],
        video: [],
        expectTime: null,
        tenantId: null, //租户id
        fileList: [],
      },
      areaData: [],
      isMapList: {
        isMap: false, //地图
        provinceId: "",
        provinceName: "",
        cityId: "",
        cityName: "",
        countyId: "",
        countyName: "",
        streetId: "",
        streetName: "",
        lng: "",
        lat: "",
      },
      rules: {
        alarmBody: [
          { required: true, message: "请填写事件标题", trigger: ["blur"] },
          { max: 100, message: "最多输入100个字符", trigger: ["blur"] },
        ],
        warningTypeId: [
          {
            required: true,
            message: "请选择告警类型",
            trigger: ["blur", "change"],
          },
        ],
        alarmTime: [
          {
            type: "string",
            required: true,
            message: "请选择告警时间",
            trigger: ["blur", "change"],
          },
        ],
        remark: [{ max: 200, message: "最多输入200个字符", trigger: ["blur"] }],
        area: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择事件地点",
          },
        ],
        address: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择详细地址",
          },
        ],
        longitude: [{ validator: validateL, required: true }],
        description: [
          {
            required: true,
            message: "请填写事件描述",
            trigger: ["blur"],
            pattern: /^(?!\s+).*(?<!\s)$/,
          },
          { max: 255, message: "最多输入255个字符", trigger: ["blur"] },
        ],
        fileList: [
          {
            required: true,
            type: "array",
            message: "请上传附件",
            trigger: ["change"],
          },
        ],
      },
      imageList: [],
      videoList: [],
      fileList: [],
      imageUrlList: [],
      videoUrlList: [],
      tempImageList: [],
      tempVideoList: [],
      dialogVisible: false,
      videoUrl: null,
      hideStreetArea: false, //是否隐藏街道区域信息
      pickerOptions: {
        disabledDate(time) {
          let lastDate = new Date("2021-07-01").getTime();
          return (
            time.getTime() < lastDate - 8.64e7 || time.getTime() > Date.now()
          );
        },
      },
      submitBtn: false, // "确定按钮loading，防止重复点击"
      showImgViewer: false,
      selectImgIndex: 0,
    };
  },
  mounted() {
    let date = new Date(new Date().getTime());
    this.ruleForm.alarmTime = this.fortime(date);
    this.loadFastAlarm();
    this.onLoadData_level();
    this.onLoadData_type();
    this.getAreaData(2);
  },
  methods: {
    handleAreaChange() {
      if (this.ruleForm.address) {
        this.ruleForm.address = "";
      }
    },
    handleAreaExpandChange(val) {
      const curNode = this.mapArea[val[val.length - 1]];
      if (curNode.children && curNode.children.length > 0) {
        return;
      }
      this.getAreaData(val.length + 2, val[val.length - 1]);
    },
    // 根据编码寻找任一级的数据
    findAreaData(tree, code) {
      const result = tree.find((ele) => ele.code === code);
      return result;
    },
    mapClick() {
      let date = new Date(new Date().getTime());
      this.ruleForm.alarmTime = this.fortime(date);
      let _this = this;
      const checkedNodes = this.$refs.areaTree.getCheckedNodes()[0] || {
        pathLabels: [],
      };
      _this.isMapList.provinceId = _this.ruleForm.area[0];
      _this.isMapList.provinceName = checkedNodes.pathLabels[0]; //获取选中的省名称
      _this.isMapList.cityId = _this.ruleForm.area[1];
      _this.isMapList.cityName = checkedNodes.pathLabels[1]; //获取选中的市名称
      _this.isMapList.countyId = _this.ruleForm.area[2];
      _this.isMapList.countyName = checkedNodes.pathLabels[2];
      _this.isMapList.streetId = _this.ruleForm.area[3];
      _this.isMapList.streetName = checkedNodes.pathLabels[3];
      _this.isMapList.lat = _this.ruleForm.latitude;
      _this.isMapList.lng = _this.ruleForm.longitude;
      _this.isMapList.isMap = true;
    },
    close() {
      this.$emit("addClose", false);
    },

    fortime(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let mm = date.getMinutes();
      let s = date.getSeconds();
      return (
        y +
        "-" +
        this.add(m) +
        "-" +
        this.add(d) +
        " " +
        this.add(h) +
        ":" +
        this.add(mm) +
        ":" +
        this.add(s)
      );
    },
    add(m) {
      return m < 10 ? "0" + m : m;
    },
    /**
     * 加载一键告警
     */
    loadFastAlarm() {
      const warningSource = $getUrlParam("warningSource");
      const lng = Number($getUrlParam("lng") || 0);
      const lat = Number($getUrlParam("lat") || 0);
      if (warningSource === "3") {
        this.isMapList.lng = lng;
        this.isMapList.lat = lat;
        this.isMapList.isMap = true;
      }
    },

    removeAaary(_arr, _obj) {
      let length = _arr.length;
      for (let i = 0; i < length; i++) {
        if (_arr[i].uid === _obj) {
          if (i === 0) {
            _arr.shift(); //删除并返回数组的第一个元素
            return _arr;
          } else if (i === length - 1) {
            _arr.pop(); //删除并返回数组的最后一个元素
            return _arr;
          } else {
            _arr.splice(i, 1); //删除下标为i的元素
            return _arr;
          }
        }
      }
    },
    //经纬度和地址回显
    async isMapCancelFun(data) {
      let _this = this;
      if (data && data.address) {
        _this.ruleForm.longitude = data.longitude
          ? parseFloat(data.longitude).toFixed(6)
          : "";
        _this.ruleForm.latitude = data.latitude
          ? parseFloat(data.latitude).toFixed(6)
          : "";

        //如果市为空，让区赋值给你市（直辖市特殊操作）
        if (data.city == "") {
          data.city = data.district;
        }
        if (
          this.mapArea[data.provinceCode].children &&
          this.mapArea[data.provinceCode].children.length === 0 &&
          data.provinceCode
        ) {
          // 获取市数据
          await this.getAreaData(3, data.provinceCode);
        }
        if (
          this.mapArea[data.cityCode].children &&
          this.mapArea[data.cityCode].children.length === 0 &&
          data.cityCode
        ) {
          // 获取区数据
          await this.getAreaData(4, data.cityCode);
        }
        if (this.mapArea[data.countyCode].children && data.countyCode) {
          // 获取乡镇数据
          await this.getAreaData(5, data.countyCode, data.townCode);
        }
        this.ruleForm.area = this.hideStreetArea
          ? JSON.parse(
              JSON.stringify([
                data.provinceCode,
                data.cityCode,
                data.countyCode,
              ])
            )
          : JSON.parse(
              JSON.stringify([
                data.provinceCode,
                data.cityCode,
                data.countyCode,
                data.townCode,
              ])
            );
        this.cascaderKey++;
        _this.ruleForm.address = data.address;
        // _this.isMapList.lng = data.longitude;
        // _this.isMapList.lat = data.latitude;
      }
      this.$refs.addEventMap.loading = false;
      _this.isMapList.isMap = data.isMap;
    },
    manuallyLocate() {
      this.isManuallyLocate = false;
    },
    provinceFunNew(id) {
      return new Promise((resolve, reject) => {
        let _this = this;
        _this.ruleForm.cityId = "";
        _this.ruleForm.countyId = "";
        _this.cityList = [];
        _this.countyList = [];
        getRegion({ areaLevel: 2, areaParentCode: id }).then((result) => {
          if (result.code === 200) {
            for (let i = 0; i < result.data.length; i++) {
              let row = result.data[i];
              _this.cityList.push({
                label: row.areaName,
                code: row.areaCode,
              });
            }
            resolve(_this.cityList);
          }
        });
      });
    },
    cityFunNew(id) {
      return new Promise((resolve, reject) => {
        let _this = this;
        this.ruleForm.countyId = "";
        this.countyList = [];
        getRegion({ areaLevel: 3, areaParentCode: id }).then((result) => {
          if (result.code === 200) {
            for (let i = 0; i < result.data.length; i++) {
              let row = result.data[i];
              _this.countyList.push({
                label: row.areaName,
                code: row.areaCode,
              });
            }
            resolve(_this.countyList);
          }
        });
      });
    },
    onLoadData_level() {
      let _this = this;
      getEnumInfo({ enumTypeId: 41 }).then(function (result) {
        if (result.code === 200) {
          _this.eventLevelDataSource = result.data;
        }
      });
    },
    onLoadData_type() {
      let _this = this;
      let param = {
        onlySatelliteFirePointFlag: true,
      };
      findOrderAlarm(param).then(function (result) {
        if (result.code === 200) {
          _this.eventTypeDataSource = result.data;
        }
      });
    },
    submitForm(formName) {
      let _this = this;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const imgs = _this.ruleForm.fileList
            .filter((item) => item.resourceType === 1)
            .map((row) => ({
              fileCode: row.resourceId,
              fileName: row.fileName,
              tagPictureUrl: row.resourceUrl,
            }));
          const videos = _this.ruleForm.fileList
            .filter((item) => item.resourceType === 2)
            .map((row) => ({
              fileCode: row.resourceId,
              fileName: row.fileName,
              startTime: null,
              endTime: null,
              recordType: 0,
              fileVideoUrl: row.resourceUrl,
            }));
          delete _this.ruleForm.fileList;

          const checkedNodes = this.$refs.areaTree.getCheckedNodes()[0] || {
            pathLabels: [],
          };
          let address = $("#addressId").val();

          let params = {
            ..._this.ruleForm,
            provinceId: _this.ruleForm.area[0],
            cityId: _this.ruleForm.area[1],
            countyId: _this.ruleForm.area[2],
            townCode: _this.ruleForm.area[3],
            imgs,
            videos,
            importanceLevel: "1",
            warningSource: $getUrlParam("warningSource") || "2", //	1-AI上报； 2-人工上报；3-一键告警
            address: checkedNodes.pathLabels.join("") + address,
            area: undefined,
          };
          this.submitBtn = true;
          addAlarmOrder(params)
            .then((result) => {
              this.submitBtn = false;
              if (result.code === 200) {
                _this.$parent.loadInit();
                _this.$parent.addShowFnc();
                _this.$message.success("保存成功");
              } else {
                _this.$message.warning(result.msg);
              }
            })
            .catch((e) => {
              this.submitBtn = false;
            });
        }
      });
    },
    getAreaData(areaLevel, areaParentCode, streetCode) {
      const _getNodes = (data) => {
        return data.map((row) => {
          const item = {
            label: row.areaName,
            code: row.areaCode,
            children: areaLevel >= 5 ? null : [],
          };
          this.mapArea[item.code] = item;
          return item;
        });
      };
      return getRegion({ areaLevel, areaParentCode }).then((result) => {
        if (result.code === 200) {
          if (areaLevel == 5) {
            let area = result.data.filter((item) => {
              return streetCode == item.areaCode;
            });
            if (!area.length) {
              this.hideStreetArea = true;
            } else {
              this.hideStreetArea = false;
            }
          }
          if (this.areaData.length === 0) {
            this.areaData = _getNodes(result.data);
          } else {
            const childNodes = _getNodes(result.data);
            this.mapArea[areaParentCode] &&
              (this.mapArea[areaParentCode].children = childNodes);
          }
        }
      });
    },
    getViewImage(file) {
      this.tempImageList.push(file);
      this.imageUrlList.push(URL.createObjectURL(file.raw));
    },
    showImage(index) {
      this.selectImgIndex = index;
      this.imageUrl = this.imageUrlList[index];
      this.showImgViewer = true;
      this.$nextTick(() => {
        // this.$refs.myImg.clickHandler()
      });
    },
    showVideo(index) {
      this.dialogVisible = true;
      this.videoUrl = this.videoUrlList[index];
    },
    deleteImage(index) {
      this.handleRemove_img(this.tempImageList[index]);
      this.imageUrlList.splice(index, 1);
      this.tempImageList.splice(index, 1);
    },
    getViewVideo(file) {
      this.tempVideoList.push(file);
      this.videoUrlList.push(URL.createObjectURL(file.raw));
    },
    deleteVideo(index) {
      this.handleRemove_video(this.tempVideoList[index]);
      this.videoUrlList.splice(index, 1);
      this.tempVideoList.splice(index, 1);
    },
    handleClose() {
      this.$refs.myVideo.pause();
      this.videoUrl = null;
      this.dialogVisible = false;
    },
    disableContextmenu() {
      return false;
    },
    closeViewer() {
      this.showImgViewer = false;
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);

/deep/ .el-dialog > .el-dialog__body {
  padding-bottom: 0px;
}
.hiddenUploadBtn {
  #upload_img,
  #upload_video {
    /deep/ .el-upload.el-upload--picture-card {
      display: none;
    }
  }
}
.eventAddMain {
  // background: rgba(255, 255, 255, 0.85);
  // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  // border-radius: 8px;
  // padding: 20px;
}

// /deep/ .el-input__inner {
//   width: 100% !important;
//   font-size: 12px;
//   border: 0.1em solid #eaeaea;
//   height: 32px;
//   line-height: 32px;
// }

/deep/ .el-textarea__inner {
  width: 100% !important;
  height: 80px;
}

.title-class {
  display: inline-block;
}

.title {
  height: 3vh;
  background: #00be8e;
  border-radius: 17px;
  margin-top: 3vh;
  /*margin-left: 3vh;*/
  display: flex;
  align-items: center;
  margin-bottom: 3vh;
}

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}

.title-name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-right: 2vh;
}

.btnStyle {
  width: 102px;
  height: 32px;
  background: #cddbe6;
  border-radius: 20px;
}

.buttons {
  display: flex;
  justify-content: right;
  margin-top: 5px;
}

.buttonClass {
  width: 90px;
  height: 32px;
  line-height: 32px;
  background: #ffffff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonClass span {
  width: 90px;
  height: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 32px;
}

.locationFont {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4a90e2;
}

// .el-button {
//   height: 32px;
//   background: #ffffff;
//   border-radius: 16px;
//   border: 1px solid #cddbe6;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   padding: 0px 0px !important;
//   font-size: 13px;
// }

/deep/ .el-input__suffix-inner {
  cursor: pointer;
}

/deep/ .el-input.is-disabled .el-input__icon {
  cursor: pointer;
}
/deep/ .isShowVideo {
  display: none !important;
  border: none !important;
}

#upload_video,
#upload_img {
  /deep/ .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 80px;
      height: 60px;
    }
  }
  /deep/ .el-upload--picture-card {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    .tip {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #b4bdc5;
    }
  }
}

.mask {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  opacity: 0;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
  i {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
}

/deep/textarea {
  resize: none;
  line-height: 20px;
}
/deep/.el-form-item__label {
  padding-right: 8px;
}
/deep/.alarm-time .el-input .el-input__inner {
  padding-left: 30px;
}
/deep/ .el-form-item__error {
  position: inherit;
}
</style>
<style lang="scss">
// .alarmTime-global .el-time-spinner__item {
//   position: relative;
//   top: -3px;
// }

.dialog-class1 {
  .btn {
    padding: 8px 17px;
    border-radius: 3px;
  }
}
.alarmTime-global .el-date-picker__time-header {
  .el-date-picker__editor-wrap:nth-child(1) {
    z-index: -1;
  }
}
</style>
